<template>
    <div class="Box">
        <div class="Message-Box">
            <span class="Box-title">给我留言/提出建议</span>
            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item label="留言：">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="dynamicValidateForm.liuyan"
                        class="text">
                    </el-input>
                </el-form-item>
                <el-form-item label="留言分类">
                    <el-select v-model="dynamicValidateForm.region" placeholder="请选择活动区域" class="text">
                        <el-option label="建议" value="shanghai"></el-option>
                        <el-option label="投诉" value="beijing"></el-option>
                        <el-option label="举报" value="jubao"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="昵称：" class="text-name">
                    <el-input v-model="dynamicValidateForm.name">
                    </el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱" :rules="[
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ]" class="text-name">
                    <el-input v-model="dynamicValidateForm.email"></el-input>
                </el-form-item>
                <el-button class="">提交</el-button>
            </el-form>
            <el-button @click="logout()">退出登录</el-button>

        </div>
    </div>
</template>
<script>
export default ({
    name: "New",
    data() {
        return {
            dynamicValidateForm: {
                region: '',
                email: '',
                liuyan: '',
                name: ''
            }
        }
    }, methods: {
        logout() {
            // 这里需要elementui的支持，如果使用其他界面组件自行替换即可
            this.$confirm("正在离开本页面，本页面内所有未保存数据都会丢失", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                //清除用户缓存
                window.localStorage.clear();
                //回到主页
                this.$router.push("/");
                //刷新当前页面
                this.$router.go(0)

            });
        },
    }

})
</script>
<style>
.Box-title {
    position: relative;
    left: 30%;
    font-size: 25px;
}

.text {
    width: 70%;
}

.text-name {
    width: 30%;

}

.text-email {
    width: 30%;

}

.Message-Box {
    position: relative;
    left: 30%;
    width: 60%;
    border: 1px red solid;
}
</style>